<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Baidu ShortUrl</title>
	<jquery/>
	<bootstrap/>
	<style type="text/css">
		section .container .row .content{padding-top: 60px;}
		section .container .row .content h1{text-align: center;}
		section .container .row .content p{text-align: center;}
		section .container .row .content .net{font-size: 16px;color: #38444D;}
		#tiao{margin-bottom: 20px;}
		form{margin-bottom: 80px;margin-top: 30px;}
		.short{float: right;margin-bottom: 20px;}
	</style>
</head>
<body>

	<section>
		<div class="container">
			<div class="row">
				<div class="col-sm-4 col-sm-offset-4 col-xs-12">
					<div class="content">
						<h1>
							<img src="view/baidu.png">
						</h1>
						<!-- tab切换 -->
						<div>
						  <!-- Nav tabs -->
						  <ul class="nav nav-tabs" role="tablist">
						    <li role="presentation" class="active">
						    	<a href="#home" aria-controls="home" role="tab" data-toggle="tab" class="net">缩短网址</a>
						    </li>
						    <li role="presentation">
						    	<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" class="net">网址还原</a>
						    </li>
						  </ul>
						  <!-- Tab panes -->
						  <div class="tab-content">
						    <div role="tabpanel" class="tab-pane active" id="home">
								<form method='post' onsubmit="return post(this)">
								  <div class="form-group">
								    <label for="url">请输入长网址</label>
								    <input type="text" value="http://www.baidu.com" class="form-control" id="url" placeholder="输入原始URI地址">
								  </div>
								  <button type="submit" class="btn btn-success short">缩短网址</button>
								</form>
									<table class="table table-striped table-bordered table-hover table-condensed">
										<tr>
											<td>短网址</td>
											<td id="short">
												
											</td>
										</tr>
										<tr>
											<td>原网址</td>
											<td id="data"></td>
										</tr>
									</table>
									<a href="" class="btn btn-info active col-sm-12 col-xs-12" role="button" id="tiao">点我，马上为你跳转</a>
									<p>@2015 ShengZai He</p>
								</div>
							<!-- 网址还原 -->
						    <div role="tabpanel" class="tab-pane" id="profile">
						    	<form method='post' onsubmit="return post(this)">
								  <div class="form-group">
								    <label for="url">请输入短网址</label>
								    <input type="text" value="" class="form-control" id="url">
								  </div>
								  <button type="submit" class="btn btn-danger short">还原网址</button>
								</form>
						    </div>
						  </div>
						</div>
					</div>		
				</div>
			</div>
		</div>
	</section>


<script type="text/javascript">

	function post(form){
		//要跳转的地址从input标签，即用户输入的地址中获得
		var data = $('#url').val();
		//ajax异步传输数据处理
		$.ajax({
			//请求的地址，由于本例情景较特殊，使用路由而不是常用m c a的方式,所以url地址需要用'/?'的方式
			url:'create',
			//需要处理的数据
			data:{url:data},
			//以什么方式输入数据
			type:'POST',
			//处理后以json的方式得到数据
			dataType:'json',
			//成功的方法
			success:function(r)
			{
				//通常以数字 0 1 表示成功或者失败;成功时，已经返回得到的短链接，将得到的短链接显示在页面中
				if(r.status==1){
					$('#short').html("http://dwz.cn/"+r.short);
					$('#data').html(r.data)
					$('#tiao').attr('href',r.short);
				}
				else
				{
					alert(r.message);
				}
			}

		})	
		return false;
	}		

</script>
</body>
</html>